<template>
  <div>
    <div class="box">
      <van-image
        class="my_img"
        width="60"
        height="60"
        fit="cover"
        round
        :src="userInfo.photo"
      />
      <h2 class="name">
        {{ userInfo.name }}
        <br />
        <van-tag color="#fff" text-color="#3296fa">
          {{ userInfo.birthday }}
        </van-tag>
      </h2>
    </div>

    <van-row class="my-control-box">
      <van-col class="my-col" span="8"
        ><van-icon class="my-icon my" name="newspaper-o" />我的作品</van-col
      >
      <van-col class="my-col star" span="8"
        ><van-icon class="my-icon star" name="star-o " />我的收藏</van-col
      >
      <van-col class="my-col history" span="8"
        ><van-icon class="my-icon history" name="tosend" />阅读历史</van-col
      >
    </van-row>

    <van-cell-group>
      <van-cell title="编辑资料" icon="edit" is-link to="/edit" />
      <van-cell title="小智同学" icon="chat-o" is-link />
      <van-cell title="系统设置" icon="setting-o" is-link />
      <van-cell title="退出登录" icon="warning-o" is-link @click="logOut" />
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { removeToken } from '../../utils/token'
// import { getUserInfo } from '../../api/user.js'

export default {
  name: 'my',
  data () {
    return {
      // userInfo: ''
    }
  },
  created () {
    // getUserInfo().then(res => {
    //   this.userInfo = res.data.data
    // })
  },
  computed: mapState(['userInfo']),
  // computed: {
  //   userInfo () {
  //     return this.$store.state.userInfo
  //   }
  // },
  methods: {
    logOut () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '你确定要退出本系统吗？'
        })
        .then(() => {
          removeToken()
          // this.userInfo = ''
          this.$store.commit('setUserInfo', '')
          this.$router.push({ path: '/home' })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 100px;
  background-color: #3296fa;
  display: flex;
  align-items: center;
  .my_img {
    margin-left: 20px;
    margin-right: 10px;
  }
  .name {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
  }
}
.my-control-box {
  padding-top: 20px;
  padding-bottom: 20px;
  .my-col {
    font-size: 12px;
    text-align: center;
  }
  .my-icon {
    font-size: 28px;
    display: block;
    &.my {
      color: #7af;
    }
    &.star {
      color: #f00;
    }
    &.history {
      color: #fa0;
    }
  }
}
</style>
